import "./index.less";
import { View } from "@tarojs/components";
import { Button, Cell, Avatar } from "@nutui/nutui-react-taro";
import { pxTransform } from "@tarojs/taro";
import { ArrowRightSmall, Plus } from "@nutui/icons-react-taro";

function TabBot() {
  return (
    <View className="saveBtn">
      <Button color="#FFC445" block>
        确认
      </Button>
    </View>
  );
}

function UserInfo({ drinkers }) {
  const src =
    "https://storage.360buyimg.com/imgtools/e067cd5b69-07c864c0-dd02-11ed-8b2c-d7f58b17086a.png";
  return (
    <View className="UserInfoWrap">
      <Cell className="infoList">
        <View className="UserInfo">
          <Avatar
            style={{ width: pxTransform(120), height: pxTransform(120) }}
            src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
          />
          <View className="user_right">
            <View className="user_name">我的宝宝</View>
            <View className="user_sex">5岁4月18日</View>
          </View>
        </View>
        <View>
          <ArrowRightSmall />
        </View>
      </Cell>
      <Cell className="infoList">
        <View className="UserInfo">
          <Avatar
            style={{ width: pxTransform(120), height: pxTransform(120) }}
            src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
          />
          <View className="user_right">
            <View className="user_name">我的宝宝</View>
            <View className="user_sex">5岁4月18日</View>
          </View>
        </View>
        <View>
          <ArrowRightSmall />
        </View>
      </Cell>

      <View className="add">
        <Button color="#FFECD7" icon={<Plus color="#ffffff" />}>
          <span style={{ color: "#C27E32", marginLeft: "10px" }}>
            添加宝宝账号
          </span>
        </Button>
      </View>

      <TabBot />
    </View>
  );
}

export default UserInfo;
